/** 结构
 Carousel map
 * first line
 ** button-icon ： to change selection
 ** search-bar : to search movies
 *** title
 *** search-icon
 ** classify: link to tab Classify
 ** ranking-list : Ranking animation according to some ranking indicators.
 * 
 * second line
 ** menu : display of the channel selected by the users(this function needs to be improved and incremental).
 ** menu-selection : user click to select different channels.
 * 
 */

import React, { Component } from 'react';
import {
    Text,
    ScrollView,
    View,
    Dimensions,
    StyleSheet,
    ImageBackground,
    Image,
    TouchableOpacity,
    TextInput,
} from 'react-native';

import Carousel from 'react-native-snap-carousel'; // Version can be specified in package.json

import { scrollInterpolator, animatedStyles } from '../../utils/animations';
import { pxPage } from '../../common/Common'
import { throttle } from '../../common/Common'
import { connect } from 'react-redux'
import recentData from '../../redux/actions/RecentData';
// import searchResult from '../../redux/actions/Search_action';
import ClassifyData from '../../redux/actions/ClassifyData';

const SLIDER_WIDTH = Dimensions.get('window').width;
const ITEM_WIDTH = Math.round(SLIDER_WIDTH * 0.95);
const ITEM_HEIGHT = Math.round(ITEM_WIDTH * 3 / 4);

const DATA = [
    require(`../../common/icon/Carousel0.jpg`),
    require(`../../common/icon/Carousel1.jpg`),
    require(`../../common/icon/Carousel2.jpg`)
];

// 数据从数据库中提取，暂且先写静态
const menuData = [
    { title: '更新', touch: true, topHeight: 260 },
    { title: '推荐', touch: false, topHeight: 250 },
    { title: '校园', touch: false, topHeight: 510 },
    { title: '搞笑', touch: false, topHeight: 810 },
    { title: '青春', touch: false, topHeight: 1000 },
    { title: '战争', touch: false, topHeight: 1000 },
]


// 封装的按钮组件，主要用于频道list下的 更多 和 换一换 按钮
// 感觉不适合页面暂不使用

const List = (obj) => {
    return <ScrollView>
        <View style={{ flexDirection: 'row', }}>

            {/* 标题及icon */}
            <View style={{
                flexDirection: 'row',
                marginLeft: pxPage(10),
                marginTop: pxPage(15),
                marginBottom: pxPage(8),
                alignItems: 'center',
            }}>
                <Image style={{ width: pxPage(25), height: pxPage(25), marginRight: pxPage(5) }} source={require('../../common/icon/花.png')}></Image>
                <Text style={{
                    color: '#F1687A',
                    fontSize: 18,
                    fontWeight: 'bold'
                }}>{obj.title}</Text>
            </View>

            {/* 更多字样 */}
            <TouchableOpacity
                style={{
                    position: 'absolute',
                    right: pxPage(20)
                }}
                onPress={throttle(() => {
                    obj.props.navigation.navigate('MoreMovies', {
                        title: obj.title
                    })
                }, 2000)}
            >
                <Text style={{
                    marginTop: pxPage(18),
                    // marginLeft: pxPage(240),
                    textDecorationLine: 'underline',
                    color: '#F1687A',

                }}>更多</Text>

            </TouchableOpacity>

        </View>

        {/* 动漫列表 */}
        <View
            style={{
                justifyContent: 'center',
                flexDirection: 'row',
                flexWrap: 'wrap',
            }}>
            {
                obj?.data?.map((item, index) => {
                    return <TouchableOpacity
                        onPress={throttle(() => {
                            obj.props.navigation.navigate('Detail', {
                                item: item
                            })
                        }, 2000)}
                        key={index}
                        style={{
                            padding: pxPage(8),
                            marginBottom: pxPage(8)
                        }}>
                        <Image
                            source={{ uri: item.img }}
                            style={{
                                width: pxPage(116),
                                height: pxPage(161),
                                borderWidth: 1.5,
                                borderColor: '#F1687A',
                                shadowColor: '#999',
                            }}
                        />
                        <Text style={{
                            fontWeight: 'bold',
                            fontSize: 15,
                            marginTop: pxPage(10)
                        }}
                        >{item.name.length <= 6 ? item.name : item.name.slice(0, 6) + '...'}</Text>
                        <Text style={{
                            color: '#919191',
                            fontSize: 12
                        }}> {item.type.length <= 8 ? item.type : item.type.slice(0, 8) + '...'}</Text>
                    </TouchableOpacity>
                })
            }
        </View>

        {/* 下方的两个按钮(感觉不是很好看还是改到标题旁边吧) */}
        {/* <View style={{
            justifyContent: 'center',
            flexDirection: 'row',
            marginBottom: pxPage(5)
        }}> */}
        {/* 更多 */}
        {/* <Btn title={'更    多'} img={require('../../common/icon/更多.png')} /> */}
        {/* 换一换 */}
        {/* <Btn title={'换 一 换'} img={require('../../common/icon/换一换.png')} /> */}
        {/* </View> */}

    </ScrollView>

}

class Home extends Component {

    state = {
        index: 0,
    }

    constructor(props) {
        super(props);
        this._renderItem = this._renderItem.bind(this)
        this.props.dispatch(recentData())
        // this.props.dispatch(searchResult('', 1))
        this.state = {
            // 改变跳转的高度
            screenHeight: 260,
            screenWidth: Dimensions.get('window').width,
            // screenHeight: Dimensions.get('window').height,
            // screenWidth: Dimensions.get('window').width,
        }
    }

    scrollToB = (num) => {
        scrollYPos = num;
        this.scroller.scrollTo({ x: 0, y: scrollYPos });
    };

    scrollToTop = () => {
        this.scroller.scrollTo({ x: 0, y: 0 });
    };

    _renderItem({ item }) {
        return (
            // 轮播图的背景图，图片有更改
            <ImageBackground style={styles.itemContainer} source={item}>
                <View>
                    {/* first line */}
                    <View style={{
                        justifyContent: 'center',
                        flexDirection: 'row',
                        marginTop: pxPage(18),
                    }}>
                        {/* 调节主题模式的按钮，先不写 */}
                        {/* button-icon */}
                        {/* <Image source={require('../../common/icon/花.png')} style={styles.buttonstyle}></Image> */}

                        {/* 搜索框 */}
                        <TouchableOpacity
                            onPress={throttle(() => {
                                this.props.navigation.navigate('SearchPage', {
                                    // title:obj.title
                                })
                            }, 2000)}
                            style={styles.searchstyle}>
                            {/* searchBar-input */}
                            <View
                                style={{ marginLeft: pxPage(10), height: pxPage(44), justifyContent: 'center' }}
                            // placeholder={'点击搜索'}
                            // placeholderTextColor="#ccc"
                            // clearTextOnFocus={true}
                            ><Text style={{ color: '#ccc', }}>点击搜索</Text>
                            </View>

                            {/* searchBar-icon */}
                            <Image
                                source={require('../../common/icon/搜索.png')}
                                style={{
                                    width: pxPage(30),
                                    height: pxPage(30),
                                    left: pxPage(120),
                                    top: pxPage(6)
                                }}
                            >
                            </Image>
                        </TouchableOpacity>

                        {/* 分类按钮 */}
                        <TouchableOpacity
                            onPress={throttle(() => {
                                this.props.navigation.navigate('Classify')
                            }, 2000)}
                        >
                            <Image style={{
                                width: pxPage(25), height: pxPage(25), margin: pxPage(5)
                            }} source={require('../../common/icon/分类2.png')}></Image>
                        </TouchableOpacity>

                        {/* 排行榜按钮 */}
                        <TouchableOpacity
                            onPress={throttle(() => {
                                this.props.navigation.navigate('RankingList')
                            }, 2000)}
                        >
                            <Text style={{ color: "#fff", width: pxPage(55), height: pxPage(22), margin: pxPage(5) }}>排行榜</Text>
                        </TouchableOpacity>

                    </View>

                    {/* second-line */}
                    <View style={{
                        justifyContent: 'center',
                        flexDirection: 'row'
                    }}>
                        {/* 轮播图下的导航栏标题 */}
                        {menuData.map((item, index) => {
                            return <TouchableOpacity
                                onPress={() => { this.scrollToB(item.topHeight) }}
                                key={index}
                                style={{
                                    margin: pxPage(8),
                                }}>
                                <Text
                                    style={{
                                        color: '#fff',
                                        fontSize: 17
                                    }}>
                                    {item.title}</Text>
                            </TouchableOpacity>
                        })}

                        {/* menu旁的频道选择按钮 */}
                        <TouchableOpacity>
                            <Image style={{ width: pxPage(24), height: pxPage(24), marginTop: pxPage(10) }} source={require('../../common/icon/pindao.png')}></Image>
                        </TouchableOpacity>

                    </View>
                </View>
            </ImageBackground>
        );
    }

    render() {
        const channelData = [
            {
                channelTitle: '校园',
                dataArr: this.props.recentdata.School
            }, {
                channelTitle: '搞笑',
                dataArr: this.props.recentdata.Happy
            }, {
                channelTitle: '青春',
                dataArr: this.props.recentdata.Youth
            }, {
                channelTitle: '战争',
                dataArr: this.props.recentdata.Warfare
            },
        ];
        return (
            <ScrollView
                ref={(scroller) => { this.scroller = scroller }}>

                {/* 轮播图部分 */}
                <Carousel
                    ref={(c) => this.carousel = c}
                    data={DATA}
                    renderItem={this._renderItem}
                    loop={true}
                    sliderWidth={SLIDER_WIDTH}
                    itemWidth={ITEM_WIDTH}
                    containerCustomStyle={styles.carouselContainer}
                    onSnapToItem={(index) => this.setState({ index })}
                    scrollInterpolator={scrollInterpolator}
                    slideInterpolatedStyle={animatedStyles}
                    useScrollView={true}
                />

                {/* 列表和其他各种频道部分 们 */}
                <ScrollView>
                    {/* 最近更新和每日推荐的数据是一样的，暂时先不显示出最近更新了 */}
                    {/* <List title={'最近更新'} data={this.props.recentdata.Recent_updata} num={6} props={this.props} />
                    <View style={{ alignItems: 'center' }}>
                        <Image
                            resizeMode='contain'
                            style={{
                                height: pxPage(150),
                                width: '90%'
                            }} source={require('../../common/icon/优惠海报.jpg')}></Image>
                    </View> */}
                    {/* <List title={'为你推荐'} data={this.props.recentdata.Comment} num={3} props={this.props} /> */}

                    {/* 为你推荐有点问题，伪推荐 */}
                    <ScrollView>
                        <View style={{ flexDirection: 'row', }}>

                            {/* 标题及icon */}
                            <View style={{
                                flexDirection: 'row',
                                marginLeft: pxPage(10),
                                marginTop: pxPage(15),
                                marginBottom: pxPage(8),
                                alignItems: 'center',
                            }}>
                                <Image style={{ width: pxPage(25), height: pxPage(25), marginRight: pxPage(5) }} source={require('../../common/icon/花.png')}></Image>
                                <Text style={{
                                    color: '#F1687A',
                                    fontSize: 18,
                                    fontWeight: 'bold'
                                }}>为你推荐</Text>
                            </View>

                        </View>

                        {/* 动漫列表 */}
                        <View
                            style={{
                                justifyContent: 'center',
                                flexDirection: 'row',
                                flexWrap: 'wrap',
                            }}>
                            <ScrollView horizontal={true}
                            // style={{ marginLeft: pxPage(10) }}
                            >
                                {
                                    // 修改了推荐的数据
                                    this.props.recentdata.Comment?.map((item, index) => {
                                        // this.props.commentdata.data?.map((item, index) => {
                                        return <TouchableOpacity
                                            onPress={throttle(() => {
                                                this.props.navigation.navigate('Detail', {
                                                    item: item
                                                })
                                            }, 2000)}
                                            key={index}
                                            style={{

                                                padding: pxPage(8),
                                                marginBottom: pxPage(8)
                                            }}
                                        >
                                            <Image
                                                source={{ uri: item.img }}
                                                style={{
                                                    width: pxPage(116),
                                                    height: pxPage(161),
                                                    borderWidth: 1.5,
                                                    borderColor: '#F1687A',
                                                    shadowColor: '#999',
                                                }}
                                            />
                                            <Text style={{
                                                fontWeight: 'bold',
                                                fontSize: 15,
                                                marginTop: pxPage(10)
                                            }}
                                            >{item.name.length <= 6 ? item.name : item.name.slice(0, 6) + '...'}</Text>
                                            <Text style={{
                                                color: '#919191',
                                                fontSize: 12
                                            }}> {item.type.length <= 8 ? item.type : item.type.slice(0, 8) + '...'}</Text>
                                        </TouchableOpacity>
                                    })
                                }
                            </ScrollView>

                        </View>

                    </ScrollView>

                    <View style={{ alignItems: 'center' }}>
                        <Image
                            resizeMode='contain'
                            style={{
                                height: pxPage(120),
                                width: '90%'
                            }} source={require('../../common/icon/优惠海报.jpg')}></Image>
                    </View>

                    {channelData.map((item) => {
                        return <List title={item.channelTitle} data={item.dataArr} num={3} props={this.props} />
                    })}
                </ScrollView>

            </ScrollView>
        );
    }
}

const styles = StyleSheet.create({
    //最上方的按钮图标样式
    buttonstyle: {
        width: pxPage(40),
        height: pxPage(40),
        // marginRight:pxPage(2)
    },
    // 整个搜索框样式
    searchstyle: {
        height: pxPage(40),
        width: pxPage(239),
        backgroundColor: 'rgba(0,0,0,0.3)',
        borderRadius: 15,
        color: '#fff',
        flexDirection: 'row'
    },

    itemContainer: {
        width: ITEM_WIDTH,
        height: ITEM_HEIGHT,
        // alignItems: 'center',
        // justifyContent: 'center',
        backgroundColor: 'dodgerblue'
    },
    itemLabel: {
        color: 'white',
        fontSize: 24
    },
    counter: {
        marginTop: 25,
        fontSize: 30,
        fontWeight: 'bold',
        textAlign: 'center'
    }
});

const mapStateToProps = state => {
    return {
        recentdata: state.recentData,
        // commentdata: state.searchResult,
    }
}

export default connect(mapStateToProps)(Home)